<template>
  <div>
    <el-row>
      <el-col :span="8">
        <!-- 商品分类树 -->
        <el-tree
          ref="categoryTree"
          v-loading="categoryLoading"
          node-key="id"
          lazy
          :default-expanded-keys="categoryTreeExpandedKeys"
          :load="loadCategoryTreeData"
          :props="categoryProps"
          :expand-on-click-node="false"
          :highlight-current="true"
          @node-click="handleCategoryNodeClick"
        />
      </el-col>
      <el-col :span="16">
        <!-- 面包屑组件 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" class="category-breadcrumb">
          <el-breadcrumb-item v-for="(categoryName, i) in categoryFullNames" :key="i">
            <span v-if="i === 2" @click="back">{{ categoryName }}</span>
            <span v-else>  {{ categoryName }} </span>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 规格组组件 -->
        <SpecGroup v-show="showSpecGroup" :selected-category-id="currentCategoryNodeKey" @specGroupTableRowSelected="handleSpecGroupSelected" />
        <!-- 规格参数组件 -->
        <SpecParam v-show="!showSpecGroup" :category-id="currentCategoryNodeKey" :spec-group="specGroup" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listCategoriesByParentId, getCategoryFullName } from '@/api/category'

export default {
  components: {
    SpecGroup: () => import('./specGroup'),
    SpecParam: () => import('./specParam')
  },
  data() {
    return {
      showSpecGroup: true,

      categoryFullNames: [],

      /**
       * 默认展开的节点
       */
      categoryTreeExpandedKeys: [],
      categoryProps: {
        label: 'categoryName'
      },
      categoryLoading: false,
      categoryData: [],
      currentCategoryNodeKey: '',
      category: {},

      specGroup: {}
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    back() {
    },
    /**
     * 加载商品分类树数据
     */
    loadCategoryTreeData(node, resolve) {
      if (node.level === 0) {
        listCategoriesByParentId()
          .then((res) => {
            return resolve(res)
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        listCategoriesByParentId(node.data.id)
          .then((res) => {
            if (res) {
              return resolve(res)
            } else {
              return resolve([])
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },

    /**
     * 单击商品分类树节点
     */
    handleCategoryNodeClick(data, node, nodeGroup) {
      this.currentCategoryNodeKey = data.id
      this.queryCategoryFullName()
      this.showSpecGroup = true
    },

    /**
     * 选择一个规则组
     */
    handleSpecGroupSelected(specGroup) {
      this.showSpecGroup = false
      this.specGroup = specGroup
    },

    /**
     * 查询商品分类全名称
     */
    async queryCategoryFullName() {
      const fullName = await getCategoryFullName(this.currentCategoryNodeKey)
      if (!fullName) {
        return []
      }
      this.categoryFullNames = fullName.split(' | ')
    }
  }
}
</script>
<style scoped>
.search-bar {
  margin: 10px 10px;
}

.category-breadcrumb {
  margin: 10px 0 20px 0;
}
</style>
